<template>
  <div class="drawer">
    <div class="drawer-info">
      <div class="drawer-info-status">
        <span v-if="data.status === 0" class="status-created">{{ $t('message.status.created') }}</span>
        <span v-if="data.status === 1" class="status-enabled">{{ $t('message.status.succeed') }}</span>
        <span v-if="data.status === 2" class="status-failed">{{ $t('message.status.failed') }}</span>
        <span v-if="data.status === 3" class="status-waiting">{{ $t('message.status.waiting') }}</span>
        <span v-if="data.status === 4" class="status-processing">{{ $t('message.status.processing') }}</span>
        <span v-if="data.status === 5" class="status-ignored">{{ $t('message.status.ignored') }}</span>
      </div>
      <ol>
        <li>{{ $t('task.topic') }}: <span>{{ data.topic }}</span></li>
        <li>{{ $t('task.tag') }}: <span>{{ data.tag }}</span></li>
        <li>{{ $t('message.time') }}: <span>{{ data.message_time }}</span></li>
        <li v-if="data.trace_id !== ''">{{ $t('message.trace.id') }}: <span>{{ data.trace_id }}</span></li>
        <li>{{ $t('message.id') }}: <span>{{ data.message_id }}</span></li>
      </ol>
    </div>
    <div class="drawer-item">
      <div class="drawer-label">
        <label>{{ $t('message.body') }}</label>
      </div>
      <div class="drawer-code">
        <pre class="normal">{{ data.message_body }}</pre>
      </div>
    </div>
    <div v-if="snapshotLoading">
      <a-spin type="small"/>
    </div>
    <div v-for="(snapshot, index) in snapshotList" :key="index">
      <div class="drawer-item">
        <div class="drawer-label">
          <label>{{ $t('message.snapshot') }} # {{ index+1 }}</label>
        </div>
        <div class="drawer-snapshot">
          <div class="drawer-info">
            <div class="drawer-info-status">
              <span v-if="snapshot.status === 0" class="status-created">{{ $t('message.status.created') }}</span>
              <span v-if="snapshot.status === 1" class="status-enabled">{{ $t('message.status.succeed') }}</span>
              <span v-if="snapshot.status === 2" class="status-failed">{{ $t('message.status.failed') }}</span>
              <span v-if="snapshot.status === 3" class="status-waiting">{{ $t('message.status.waiting') }}</span>
              <span v-if="snapshot.status === 4" class="status-processing">{{ $t('message.status.processing') }}</span>
              <span v-if="snapshot.status === 5" class="status-ignored">{{ $t('message.status.ignored') }}</span>
            </div>
            <ul>
              <li>{{ $t('message.received.time') }}: <span>{{ snapshot.received_time }}</span></li>
              <li>{{ $t('task.handler') }}: <span>{{ snapshot.handler }}</span></li>
              <li>{{ $t('message.duration') }}: <span>{{ snapshot.duration }}</span> {{ $t('unit.second.milli') }}</li>
            </ul>
          </div>
          <div v-if="snapshot.response_body !== ''" class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('message.response.body') }}</label>
            </div>
            <div class="drawer-code">
              <pre class="success">{{ snapshot.response_body }}</pre>
            </div>
          </div>
          <div v-if="snapshot.response_error !== ''" class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('message.response.error') }}</label>
            </div>
            <div class="drawer-code">
              <pre class="error">{{ snapshot.response_error }}</pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSnapshotList } from '@/api/v1'

export default {
  data () {
    return {
      data: {},
      snapshotList: [],
      snapshotLoading: false
    }
  },
  methods: {
    async loadSnapshot () {
      this.snapshotLoading = true
      getSnapshotList({
        task_id: this.data.subscription_id,
        message_id: this.data.message_id
      }, (res) => {
        this.snapshotLoading = false
        this.snapshotList = res.data
      }, (err) => {
        this.snapshotLoading = false
        this.$message.error(err)
      })
    }
  },
  mounted () { this.data = this.origin; this.loadSnapshot() },
  name: 'DetailSchedulers',
  props: { origin: { type: Object, required: true } },
  watch: { origin: { handler (data) { this.data = data; this.loadSnapshot() } } }
}
</script>
